<template>
	<div class="loading">
		<svg viewBox="0 0 50 50" width="150" height="150">
      <!-- 
        stroke-dasharray= 2 * pie * r/4 = 2*3.1415926*22/4
        stroke-linecap="round"设置两端圆角
        from的第2个第3个参数可以设置以某个坐标点做变换
        可以通过values传递多个值
      -->
			<circle cx="25" cy="25" r="22" stroke-width="3" stroke-dasharray="34" stroke="#3be6cb" stroke-linecap="round" fill="none">
        	<!-- <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 25 25"
          to="360 25 25"
          dur="2s"
          repeatCount="indefinite"
        ></animateTransform> -->
				<animateTransform attributeName="transform" type="rotate" values="0 25 25;360 25 25" dur="2" repeatCount="indefinite"></animateTransform>
			</circle>
			<circle cx="25" cy="25" r="12" stroke-width="3" stroke-dasharray="19" stroke="#02bcfe" fill="none">
				<animateTransform attributeName="transform" type="rotate" values="360 25 25;0 25 25" dur="2" stroke-linecap="round" repeatCount="indefinite"></animateTransform>
			</circle>
		</svg>
	</div>
</template>

<script>
export default {
	name: 'Loading',
};
</script>

<style lang="scss" scoped></style>
